<template>
	<div>动态表单</div>
	<json-form ref="formRef" :form-rules="formRules" v-model:api="formApi" :options="formOptions"></json-form>
	<el-button @click="getForm" type="primary">获取表单数据</el-button>
	<el-button @click="validateForm" type="primary">校验表单数据</el-button>
	<el-button @click="resetForm" type="primary">重置表单数据</el-button>
	<el-button @click="setValue" type="primary">设置表单数据</el-button>
</template>
<script lang="ts" setup>
import JsonForm from './components/index.vue';
const formApi = ref({});
const formRules = ref<any>([
	{
		type: 'input',
		label: '姓名',
		field: 'name',
		hidden: true,
		col: {
			span: 12
		},
		// props: {
		// 	placeholder: '请输入姓名',
		// 	type: 'textarea',
		// 	rows: 4,
		// 	maxlength: 100,
		// 	showWordLimit: true
		// },
		validate: [
			{
				required: true,
				message: '姓名不能为空'
			}
		],
		on: {
			change: (data: any) => {
				console.log(data);
			}
		},
		style: {
			width: '600px'
		}
	},
	{
		type: 'select',
		label: '性别',
		field: 'sex',
		options: [
			{ label: '男', value: 1 },
			{ label: '女', value: 2 }
		],
		props: {
			placeholder: '请选择性别'
		},
		validate: [
			{
				required: true,
				message: '请选择性别'
			}
		],
		style: {
			width: '300px'
		},
		col: {
			span: 24
		}
	}
]);

const formRef = ref();

const formOptions = {
	labelWidth: '120px',
	labelPosition: 'right'
};

function getForm() {
	console.log(formApi.value);
}
async function validateForm() {
	const valid = await formRef.value.validate();
	console.log('valid', valid);
}
function resetForm() {
	formRef.value.resetFields();
}

function setValue() {
	// formRef.value.setValue('name', '张三');
	formRef.value.setValue({
		name: '张三'
	});
}
</script>
